<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		
			.imageShow a{
				display: block;
				margin: 50px;
			}
			.imageShow img{
				width: 200px;
				display: block;
				margin-bottom: 20px;
			}
			#imageContent{
				position: relative;
				text-align: center;
				width: 800px;
				height: 470px;
				display: none;
				overflow: hidden;
			}
			#imageContent img{
				width: 600px;overflow: hidden;
			}
			
			#imageContent #left{
				position: absolute;
				top: 0px;left: 0px;
				width: 400px;
				height: 450px;
				text-align: center;
				overflow: hidden;
			}
			
			#imageContent #left .hand{
				background:url(handImg/hand.jpg) 0px -200px;
				width: 250px;height: 200px;
				display: block;
				margin: 100px 60px;
				border: 1px solid #ccc;
				display: none;
			}
			
			#imageContent #right{
				position: absolute;
				top: 0px;right: 0px;
				width: 400px;
				height: 450px;
				overflow: hidden;
			}
			#imageContent #right .hand{
				background:url(handImg/hand.jpg) -263px -200px;
				width: 250px;height: 200px;
				display: block;
				margin: 100px 60px;
				border: 1px solid #ccc;
				display: none;
			}
			
			.task{
				position: absolute;
				bottom: 0px;left: 366px;
			}
		</style>
	</head>
	
	  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  	  <script type="text/javascript" src="layer/layer.js"></script>
  	  <script type="text/javascript" src="js/jquery.imageshow.js"></script>
	<body>
		
		
		<div class="imageShow" id="father">
		
			<a href="javascript:void" id="imageShow">图片预览</a>
			
			<a href="javascript:void" >
			
			<a href="javascript:void" ><img src="img/1514140552N.jpg" title="图片预览"/></a>
			<a href="javascript:void" ><img src="img/20071229164759914_2.jpg" title="图片预览"/></a>
			<a href="javascript:void" ><img src="img/2029588_133948037836_2.jpg" title="图片预览"/></a>
			<a href="javascript:void" ><img src="img/219049-1210031JQ969.jpg" title="图片预览"/></a>
		
		</div>
		
		<div id="imageContent">
			
			<div id="left">
				
				<span class="hand"></span>
				
			</div>
			
			<img src="img/20071229164759914_2.jpg" data-index=""/>
			
			<div id="right">
				<span class="hand"></span>
			</div>
			
			<div class="task">	
				<a href="javascript:void" id="taskTime" data-state="close">开启自动播放</a>
			</div>
		</div>
		
	</body>
</html>

<script type="text/javascript">
	
	var imageList=[];
	
	$(function(){
		
		ImageShow();
		
		$("#imageShow").click(function(){
			layerOpen();
		});
		
		$("img").each(function(i){
			
			$(this).click(function(){
				if(imageList !=null && imageList.length >0){
					$("#imageContent").find("img").attr("src",imageList[i]);
					$("#imageContent").find("img").attr("data-index",i);
					layerOpen();
				}
				
			});
		});
		
		$("#taskTime").click(function(){
			var state=$("#taskTime").attr("data-state");
			if(state=="close"){
				$("#taskTime").text("关闭自动播放");
				$("#taskTime").attr("data-state","open");
				
				hnd=setInterval("myInterval()",1500);//1000为1秒钟
			}else if(state=="open"){
				$("#taskTime").text("开启自动播放");
				$("#taskTime").attr("data-state","close");
				
				clearInterval(hnd);
			}
		});
		
//		左右手指切换图片
		$("#left").click(function(){
			var index=$("#imageContent").find("img").attr("data-index");
			if(index >0){
				--index;
			}else if(index <=0){
				index=imageList.length-1;
			}
			$("#imageContent").find("img").attr("src",imageList[index]);
			$("#imageContent").find("img").attr("data-index",index);
		});
		
		$("#right").click(function(){
			var index=$("#imageContent").find("img").attr("data-index");
			if(index >=imageList.length-1){
				index=0;
			}else if(index <imageList.length-1){
				index++;
			}
			$("#imageContent").find("img").attr("src",imageList[index]);
			$("#imageContent").find("img").attr("data-index",index);
		});
		
//		悬浮到指定区域显示手指
		$("#left,#right").hover(function(){
			$(this).find('.hand').css("display","block");
		},function(){
			$(this).find('.hand').css("display","none");
		})
	});
	
	
	function ImageShow(){
		
		var pic=document.getElementById("father").getElementsByTagName("img");
		for(var i=0;i<pic.length;i++){
			imageList.push(pic[i].getAttribute("src"));
		}
		var imgsrc=imageList[0];
		$("#imageContent").find("img").attr("src",imageList[0]);
		$("#imageContent").find("img").attr("data-index",0);
	}
	
	function layerOpen(){
		layer.open({
		   type: 1, 
		   area: ['800px', '520px'],
		   content: $("#imageContent"),
		   success: function(layero, index){
//			  hnd=setInterval("myInterval()",1500);//1000为1秒钟
		   },
		   end:function(){
		   		$("#taskTime").text("开启自动播放");
				$("#taskTime").attr("data-state","close");
		   	  clearInterval(hnd);
		   }
		});
	}
	
	//	定時任務
	var hnd; //定时器对象
//	 setInterval("myInterval()",1000);//1000为1秒钟
		function myInterval() {
			var index = $("#imageContent").find("img").attr("data-index");
			if(index >= imageList.length - 1) {
				index = 0;
			} else if(index < imageList.length - 1) {
				index++;
			}
			$("#imageContent").find("img").attr("src", imageList[index]);
			$("#imageContent").find("img").attr("data-index", index);
		}

</script>
